<template>
    <div class="sdy-home-list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          class="list-box"
          v-model:loading="loading"
          :finished="finished"
          offset="50"
          @load="getListHandler"
          finished-text="没有更多了 O(∩_∩)O~">
          <div class="list-item" v-for="item in goodsList" :key="item.proid">
            <img :src="item.img1" alt="">
            <p class="title">{{ item.proname }}</p>
            <p class="price">￥ {{ item.originprice }}</p>
            <p class="other">
              <span>{{ item.discount }} 条评论</span>
              <span>看相似</span>
            </p>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </template>
  
  <script name="sdyHomeList" setup lang="ts">
  import { getGoodsList } from '../../../model/goods'
  import { ref } from 'vue'
  
  // 定义接口
  interface GoodsInfo {
    img1?: string
    proid?: string
    proname?: string
    originprice?: number
    discount?: number
    [key: string]: any
  }
  
  interface Response {
    code: string
    data: Array<GoodsInfo>
  }
  
  // 表示是否在加载中
  const loading = ref<boolean>(false)
  const finished = ref<boolean>(false)
  // 下拉刷新
  const refreshing = ref<boolean>(false)
  
  const goodsList = ref<Array<GoodsInfo>>([])
  
  // 准备一个变量, 表示当前第几页
  const pagenum = ref<number>(1)
  
  // 准备一个发送请求的方法
  const getListHandler = () => {
    setTimeout(async () => {
      const res = await getGoodsList(pagenum.value)
      if ((res as unknown as Response).code !== '200') return
      // 注意: 不能进行赋值, 应该向原始数组内追加
      goodsList.value.push(...res.data)
      // 判断 res.data 不足 10 条的时候, 没有更多了
      if (res.data.length < 10) finished.value = true
      pagenum.value++
      // 页面渲染完毕, 调整 loading 为 true
      loading.value = false
      // 让下拉刷新还原
      refreshing.value = false
    }, 1000)
  }
  
  // 下拉刷新的事件
  const onRefresh = () => {
    // console.log('要刷新了')
    // 咱们自己模拟一个随机的 1 ~ 5 页
    pagenum.value = Math.floor(Math.random() * 5) + 1
    // 把数组清空
    goodsList.value = []
    // 把完成状态还原到未完成
    finished.value = false
    // 发送一次请求
    getListHandler()
  
  }
  
  
  </script>
  
  <style lang="scss" scoped>
  .sdy-home-list {
    margin-top: 10px;
  }
  
  .list-box {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
  
    > .list-item {
      width: 45%;
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 10px;
  
      > img {
        width: 100%;
        height: 160px;
        display: block;
      }
  
      > p.title {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        margin: 10px;
        font-size: 14px;
      }
  
      > p.price {
        margin: 10px;
        color: red;
        font-size: 18px;
      }
  
      > p.other {
        display: flex;
        padding: 0 10px 10px;
        justify-content: space-between;
        align-items: center;
  
        > span {
          font-size: 12px;
  
          &:first-child {
            color: #ccc;
          }
  
          &:last-child {
            padding: 5px;
            background-color: #F2F2F2;
            border-radius: 5px;
          }
        }
      }
    }
  }
  </style>
  